import { Demo1Component } from './demo1/demo1.component';
import { DoubleComponent } from './double/double.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { CustomizeComponent } from './customize/customize.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';

export const SliderConfig = {
  location: 'Slider',
  description: '滑动条，展示当前值和可选范围。',
  description_en: 'Slider bar, which displays the current value and available range.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/slider/demo1/demo1.component',
      demoTitle: '单滑块模式',
      demoTitle_en: 'Single slider',
      demoDescription: '支持单向滑动。',
      demoDescription_en: 'Support for one-way sliding.'
    },
    {
      demo: DoubleComponent,
      codePath: 'showcase/slider/double/double.component',
      demoTitle: '双滑块模式',
      demoTitle_en: 'Double slider',
      demoDescription: '支持双向滑动。',
      demoDescription_en: 'Support two-way sliding.'
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/slider/demo3/demo3.component',
      demoTitle: '步长',
      demoTitle_en: 'Step',
      demoDescription: '步长，按照步长的倍数增加。取值必须大于 0，并且可被 (max - min) 整除。',
      demoDescription_en:
        'Step. The value increases by a multiple of the step. The value must be greater than 0 and can be exactly divided by (max – min).'
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/slider/demo4/demo4.component',
      demoTitle: '垂直',
      demoTitle_en: 'Vertical',
      demoDescription: '垂直方向的滑动条。',
      demoDescription_en: 'vertical slider.',
      devDebug: true,
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/slider/demo7/demo7.component',
      demoTitle: '反向显示',
      demoTitle_en: 'inverted display',
      demoDescription: '反向显示。',
      demoDescription_en: 'inverted display.'
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/slider/demo8/demo8.component',
      demoTitle: '最大最小值',
      demoTitle_en: 'maximum and minimum values',
      demoDescription: '设置最大最小值。',
      demoDescription_en: 'Set the maximum and minimum values.'
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/slider/demo5/demo5.component',
      demoTitle: '自定义刻度值和提示文字',
      demoTitle_en: 'Customized scale value and prompt text',
      demoDescription: '自定义刻度值和提示文字。',
      demoDescription_en: 'Customized scale value and prompt text.'
    },
    {
      demo: CustomizeComponent,
      codePath: 'showcase/slider/customize/customize.component',
      demoTitle: '自定义点、区间及提示文字',
      demoTitle_en: 'Customized points, ranges, and prompt texts',
      demoDescription: '自定义点、区间及提示文字。',
      demoDescription_en: 'Customized points, ranges, and prompt texts.'
    }
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-slider',
  snippet: `<lv-slider [(ngModel)]="\${1:status}"></lv-slider>`,
  api: [
    {
      attribute: 'ngModel',
      type: 'number | sliderArray',
      default: 'null',
      description: '当前选中值，可双向绑定。sliderArray = [startNumber: number, endNumber: number], 双滑块模式需要绑定sliderArray类型。',
      description_en:
        'Selected value, which can be bound bidirectionally. sliderArray = [startNumber: number, endNumber: number], The double-slider pattern requires binding of the type sliderArray.'
    },
    {
      attribute: 'lvDisabled',
      type: 'boolean',
      default: 'false',
      description: '是否禁用组件。',
      description_en: 'Disable Component.'
    },
    {
      attribute: 'lvStep',
      type: 'number',
      default: '1',
      description: '步幅值。',
      description_en: 'step.'
    },
    {
      attribute: 'lvRange',
      type: 'boolean',
      default: 'false',
      description: '双滑块。',
      description_en: 'double slider.'
    },
    {
      attribute: 'lvDirection',
      type: 'string',
      default: 'horizontal',
      description: `滑动条的方向，支持横向纵向两种布局 ('horizontal' | 'vertical')，默认为横向布局。`,
      description_en: `Slider supports both horizontal and vertical layouts ('horizontal '|' vertical'). The default is vertical layout.`
    },
    {
      attribute: 'lvReverse',
      type: 'boolean',
      default: 'false',
      description: `滑动条是否反向显示，默认横向展示时从左往右，垂直显示时从下往上。`,
      description_en: `Indicates whether to reverse the display of the slider bar. By default, the slider bar is displayed from left to right in the horizontal direction and from bottom to top in the vertical direction.`
    },
    {
      attribute: 'lvTooltip',
      type: 'boolean | number | string | TemplateRef',
      default: 'true',
      description: `自定义边界值提示文字。值为 false 时不显示提示信息。`,
      description_en: `Customizing the prompt texts,No prompt message is displayed when the value is false.`
    },
    {
      attribute: 'lvDivision',
      type: 'number',
      default: 'null',
      description: `自定义刻度,定义展示多少个刻度值。`,
      description_en: `Customizing the scale, which defines the number of scales to be displayed.`
    },
    {
      attribute: 'lvLines',
      type: 'LvSliderLines',
      default: 'null',
      description: `定义区间域。LvSliderLines = [{value: [startNumber: number, endNumber: number], style?: Object}]。`,
      description_en: `Defining an interval field.LvSliderLines = [{value: [startNumber: number, endNumber: number], style?: Object}].`
    },
    {
      attribute: 'lvPoints',
      type: 'LvSliderPoints',
      default: 'null',
      description: `定义点域。LvSliderPoints = [{value: number, label?: String, pointStyle?: Object, textStyle?: Object}]。`,
      description_en: `Defining a Point Domain.LvSliderPoints = [{value: number, label?: String, pointStyle?: Object, textStyle?: Object}].`
    },
    {
      attribute: 'lvMin',
      type: 'number',
      default: '0',
      description: '最小边界值。',
      description_en: 'Minimum boundary value.'
    },
    {
      attribute: 'lvMax',
      type: 'number',
      default: '100',
      description: '最大边界值。',
      description_en: 'maximum boundary value.'
    },
    {
      attribute: 'lvTrackVisible',
      type: 'boolean',
      default: 'true',
      description: '是否显示已选区域滑动条。',
      description_en: 'Indicates whether to display the slider in the selected area.'
    },
    {
      attribute: 'lvHandleColor',
      type: 'string | array',
      default: 'null',
      description: `自定义滑块颜色，设置大于某个值的颜色值，如: [[0, 'red'], [50, 'blue'], [100, 'green']]。`,
      description_en: `Set the color of the slider. The default color is gray. Sets a color value greater than a value. For example:[[0, 'red'], [50, 'blue'], [100, 'green']].`
    },
    {
      attribute: 'lvTooltipTheme',
      type: 'string',
      default: 'dark',
      description: `提示框主题，可选值为 ('dark' | 'light')。`,
      description_en: `Theme of the tipbox. Value: ('dark' | 'light').`
    },
    {
      attribute: 'lvHoverShowTooltip',
      type: 'boolean',
      default: 'false',
      description: `鼠标悬停到滑动条上时是否显示 tooltip。`,
      description_en: `Whether the tooltip is displayed when the cursor is hover on the slider.`
    }
  ],
  event: [
    {
      event: 'onChange',
      parameter: 'EventEmitter<number[] | number>',
      description: '当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。',
      description_en: 'Callback function that is fired when the user changes the sliders value.'
    },
    {
      event: 'onSlideEnd',
      parameter: 'EventEmitter<number[] | number>',
      description: `与 onmouseup 触发时机一致，把当前值作为参数传入。`,
      description_en: `Fire when 'onmouseup' is fired.`
    }
  ]
};
